import { defineComponent, reactive, watch } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import recruit from '../../../public/recruit.json';

export default defineComponent({
    name: 'Home',
    setup() {
        const store = useStore();
        const router = useRouter();
        const state = reactive({
            recruitData: [].concat(...(Object.keys(recruit).map(key => recruit[key]))),
            searchType: 'all',
            searchOptions: [
                { label: "全部", value: "all" },
                { label: "研发", value: "yanfa" },
                { label: "实施", value: "shishi" },
                { label: "需求", value: "xuqiu" },
                { label: "数据", value: "shuju" },
                { label: "设计", value: "sheji" },
                { label: "市场", value: "shichang" },
                { label: "人事", value: "renshi" },
                { label: "售前", value: "shouqian" },
                { label: "销售", value: "xiaoshou" }
            ],
            clientWidth: store.getters["app/getClientWidth"],
            scroll: 0,
            isPopupShow: false
        });
        watch(() => state.searchType, (searchType) => {
            if (searchType === 'all') {
                state.recruitData = [].concat(...(Object.keys(recruit).map(key => recruit[key])));
            } else {
                state.recruitData = recruit[searchType];
            }
        });
        watch(() => store.state.app.clientWidth, (clientWidth) => {
            state.clientWidth = clientWidth;
        });
        return {
            state, router
        }
    },
    beforeRouteLeave(to, from, next) {
        this.state.scroll = this.$refs.home.scrollTop;
        next();
    },
    activated() {
        this.$refs.home.scrollTop = this.state.scroll;
    },
    render() {
        return <div class="home" ref="home">
            <div class="flex justify-between items-center">
                {
                    this.state.clientWidth >= 900 ?
                        <div>{this.state.searchOptions.map(({ label, value }) => <el-button size="small" type={this.state.searchType === value ? "primary" : "default"} onClick={() => { this.state.searchType = value }}>{label}</el-button>)}</div> :
                        <el-select v-model:modelValue={this.state.searchType} placeholder="Select">
                            {
                                this.state.searchOptions.map(({ label, value }) => <el-option label={label} value={value}></el-option>)
                            }
                        </el-select>
                }
                <div class="text-gray-400 text-sm">找到 {this.state.recruitData.length} 个岗位</div>
            </div>
            <div class="mt-3">
                <el-row justify="space-between" gutter={10}>
                    {
                        this.state.recruitData.map(item => {
                            return (
                                <el-col xs={24} sm={12} md={8}>
                                    <el-card class="box-card mb-3 cursor-pointer"
                                        onClick={() => this.router.push({name:'Detail', query:{id:item.id}})}
                                        v-slots={{
                                            header: () => (
                                                <div class="card-header flex justify-between items-center">
                                                    <h2 class="font-semibold text-base">{item.position}</h2>
                                                    <el-tag class="font-semibold">{item.type}</el-tag>
                                                </div>
                                            )
                                        }}
                                    >
                                        <div class="text-xs flex flex-col justify-between text-gray-500 h-20">
                                            <div>工作部门：{item.department} </div>
                                            <div>工作地点：{item.addr.map(addrItem => <span class="mr-2">{addrItem}</span>)}</div>
                                            <div>薪资范围：{`${item.salaryLeast}k - ${item.salaryMost}k`}</div>
                                            <div>发布日期：{item.date}</div>
                                        </div>
                                    </el-card>
                                </el-col>
                            )
                        })
                    }
                </el-row>
            </div>
        </div >
    }
})